import React from 'react'

export default class TopHeader extends React.Component {
    constructor(props) {
        super(props)
    }

    headerLogout() {
        logout();
    }

    render() {
        return (
            <header className="topbar">
                <nav className="navbar top-navbar navbar-expand-md navbar-dark">
                    <div className="navbar-header">
                        <a className="nav-toggler waves-effect waves-light d-block d-md-none" href="javascript:void(0)">
                            <i className="ti-menu ti-close"></i>
                        </a>
                        <a className="navbar-brand" href="index.html">
                            <b className="logo-icon">
                                <img src="static/images/logo-icon.png" alt="homepage" className="dark-logo" style={{ width:'32px', height:'32px' }} />
                                <img src="static/images/logo-light-icon.png" alt="homepage" className="light-logo" style={{ width:'32px', height:'32px' }} />
                            </b>
                            <span className="logo-text">
                                <img src="static/images/logo-text.png" alt="homepage" className="dark-logo" />
                                <img src="static/images/logo-light-text.png" className="light-logo" alt="homepage" />
                            </span>
                        </a>
                    
                        <a className="topbartoggler d-block d-md-none waves-effect waves-light" href="javascript:void(0)" data-toggle="collapse" data-target="#navbarSupportedContent"
                            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <i className="ti-more"></i>
                        </a>
                    </div>
                   
                    <div className="navbar-collapse collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav float-left mr-auto">
                            <li className="nav-item d-none d-md-block">
                                <a className="nav-link sidebartoggler waves-effect waves-light" href="javascript:void(0)" data-sidebartype="mini-sidebar">
                                    <i className="sl-icon-menu font-20"></i>
                                </a>
                            </li>
                        </ul>
                        <ul className="navbar-nav float-right">
                            <li className="nav-item">
                                <a className="nav-link waves-effect waves-dark" href="javascript:void(0)" onClick={this.headerLogout.bind(this)}>
                                    <i className="mdi mdi-exit-to-app font-16"></i>
                                </a>
                            </li>
                            <li className="nav-item dropdown">
                                <a className="nav-link dropdown-toggle text-muted waves-effect waves-dark pro-pic" href="" data-toggle="dropdown" aria-haspopup="true"
                                    aria-expanded="false">
                                    <img src="static/images/users/1.jpg" alt="user" className="rounded-circle" width="31" />
                                </a>
                                <div className="dropdown-menu dropdown-menu-right user-dd animated flipInY">
                                    <span className="with-arrow">
                                        <span className="bg-primary"></span>
                                    </span>
                                    <div className="d-flex no-block align-items-center p-15 bg-primary text-white m-b-10">
                                        <div className="">
                                            <img src="static/images/users/1.jpg" alt="user" className="img-circle" width="60" />
                                        </div>
                                        <div className="m-l-10">
                                            <h4 className="m-b-0">YoTest.Yuan</h4>
                                            <p className=" m-b-0">2329082643@qq.com</p>
                                        </div>
                                    </div>
                                    <a className="dropdown-item" href="javascript:void(0)">
                                        <i className="ti-user m-r-5 m-l-5"></i> 个人资料</a>
                                    <a className="dropdown-item" href="javascript:void(0)">
                                        <i className="ti-email m-r-5 m-l-5"></i> 收件箱</a>
                                    <div className="dropdown-divider"></div>
                                    <a className="dropdown-item" href="javascript:void(0)">
                                        <i className="ti-settings m-r-5 m-l-5"></i> 帐号设置</a>
                                    <div className="dropdown-divider"></div>
                                    <a className="dropdown-item" href="javascript:void(0)" onClick={this.headerLogout}>
                                        <i className="fa fa-power-off m-r-5 m-l-5"></i> 退出</a>
                                    <div className="dropdown-divider"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </nav>
            </header>
        )
    }
}